<template>
	<view>
		<fans-list :list="list" :loadStatus="loadStatus"></fans-list>
	</view>
</template>

<script>
	import fansList from '../../components/fans-list/fans-list.vue';
	export default {
		components: {
			fansList,
		},
		data() {
			return {
				list: [],
				page:1,
				loadStatus: "loadmore"
			};
		},
		onLoad() {
			this.getFansList();
		},
		onReachBottom() {			
			if(this.loadStatus!='nomore') {
				this.page++;
				this.loadStatus = 'loading'
				this.getFansList();
			}
		},
		methods: {
			async getFansList() {
				this.loadStatus = "loading";
				let res = await this.$api('fans')
				this.list = this.list.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			}			
		}
	}
</script>

<style lang="scss">
	
</style>
